<template>
  <view class="w-full h-auto bg-[#f8f8f8] border-t-[1px] border-solid border-[#f5f5f5]">
    <!-- 推荐问题scroll -->
    <Recommended />
    <!-- 用户输入框 -->
    <view class="w-full min-h-[36px] px-2 box-border flex flex-row justify-between items-end pb-1">
      <view class="shrink-[0] w-auto h-6 flex justify-center items-center">
        <uni-icons type="mic-filled" size="24" color="#999"></uni-icons>
      </view>
      <view class="flex-auto h-auto mx-[4px]">
        <textarea :auto-height="true" v-model="content" @keydown="handleKeyDown" placeholder="请输入问题" class="box-border bg-white dzm-textarea w-full max-h-12 min-h-6 text-[16px] leading-[28px] px-[4px]"></textarea>
      </view>
      <view class="shrink-[0] w-[50px] bg-[#f00] flex justify-center items-center py-[4px] rounded-xl">
        <svg t="1743401853895" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="2605" width="20" height="20">
          <path
            d="M896 167.253333l-256 714.666667a21.333333 21.333333 0 0 1-20.053333 14.08h-6.826667a21.76 21.76 0 0 1-19.626667-12.373333l-100.693333-213.333334a85.333333 85.333333 0 0 1 14.506667-94.293333l128-139.946667a21.333333 21.333333 0 0 0 0-29.44l-16.213334-16.213333a21.333333 21.333333 0 0 0-29.44 0l-139.946666 128a85.333333 85.333333 0 0 1-94.293334 14.506667l-213.333333-100.693334A21.76 21.76 0 0 1 128 412.586667v-6.826667A21.333333 21.333333 0 0 1 142.08 384l714.666667-256a21.333333 21.333333 0 0 1 22.186666 4.693333l11.093334 11.093334a21.333333 21.333333 0 0 1 5.973333 23.466666z"
            p-id="2606"
            fill="#FFFFFF"
          ></path>
        </svg>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import Recommended from '@/components/Recommended/index.vue'
import { ref, watch } from 'vue'

const content = ref('')
watch(
  () => content.value,
  newValue => {
    console.log(newValue)
  },
  {
    immediate: true,
    deep: true
  }
)
const handleKeyDown = (e: any) => {
  if (e.key === 'Enter') {
    e.preventDefault() // 阻止默认换行行为
    submitContent()
  }
}
const submitContent = () => {}
</script>
<style lang="scss">
.dzm-textarea::-webkit-scrollbar {
  display: none; /* 完全隐藏滚动条 */
}
uni-textarea {
  height: auto;
}
.dzm-textarea {
  resize: none; /* 禁止手动调整 */
  overflow-y: scroll; /* 隐藏滚动条 */
  background: #ffffff;
  outline: none;
  border-radius: 4px;
}
</style>
